<template>
    <div class="admin-product">
        <div class="admin-product-header">新增产品</div>
        <div class="admin-product-content">
            <el-form :model="company" label-width="auto" style="max-width: 1000px">
                <!-- 标题 -->
                <div style="text-align: left;">
                    <div>
                        <el-form-item label="电话">
                            <el-input v-model="company.tel" />
                        </el-form-item>
                    </div>
                    <div>
                        <el-form-item label="邮件">
                            <el-input v-model="company.email" />
                        </el-form-item>
                    </div>
                </div>
                <div>
                    <div>
                        <el-form-item label="地址">
                            <el-input v-model="company.address" />
                        </el-form-item>
                    </div>
                </div>
                <div>
                    <el-form-item label="网站备案">
                            <el-input v-model="company.web" />
                        </el-form-item>
                </div>
                <div class="form-wrapper">
                    <el-form-item label="简介">
                        <el-input v-model="company.introduct" type="textarea" :rows="16" style="width: 100vb;" />
                    </el-form-item>
                </div>
            </el-form>
            <div style="text-align: center; margin-top: 20px;">
                <el-button type="primary" @click="updateForCompanyInfo">更新公司信息</el-button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onBeforeMount } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import { companyApi, updateCompanyAPI } from '@/requests/'

const router = useRouter();
const loading = ref(true);


const company = ref({
    tel: null,
    email: null,
    introduct: null,
    address: null,
    web:null
});

const forCompanyInfo = async()=>{
    const res = await companyApi();
    if (res.status === 2000){
        company.value.tel = res.data.tel;
        company.value.email = res.data.email;
        company.value.introduct = res.data.introduct;
        company.value.address = res.data.address;
        company.value.web = res.data.web;
    }
};

onBeforeMount(()=>{
    forCompanyInfo();
});


// 更新公司信息
const updateForCompanyInfo = async()=>{
    const res = await updateCompanyAPI(company.value);
    if (res.status === 2000){
        ElMessage.success("更新成功");
    }else{
        console.log(res.msg)
        ElMessage.error("更新失败");
    };
    forCompanyInfo();
}


</script>

<style scoped>
.admin-product-header {
    margin-top: 20px;
    margin-left: 20px;
    height: 40px;
    line-height: 40px;
    background-color: #F9F9F9;
    padding-left: 20px;
    padding-right: 20px;
}

.admin-product-content {
    margin-top: 80px;
    margin-bottom: 50px;
    margin-left: 20px;
}

.admin-product {
    display: flex;
    text-align: center;
    min-height: 100px;
}

.form-wrapper > div {
    display: inline-block;
}
</style>